<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="todolist.css">
</head>
<body>
	<div class="top">
		<div class="top_a">
			<h2>ToDoList</h2>
			<input type="text" id="title" name="title" placeholder="添加ToDo">
		</div>
	</div>
	<div class="bottom">
		<h2>正在进行 <span id="todocount">0</span></h2>
		<ol id="todolist">
			<li class="hide">
				<input type="checkbox" id="hold">
				<p id="dotext"></p><i>-</i>
			</li>
		</ol>
		<h2>已经完成 <span id="donecount">0</span></h2>
		<ul id="donelist">
		</ul>
	</div>
	<div class="popup">
		<div class="mask">
			<p>账号：<input type="text" name="" class="Accountnumber"></p>
			<p>密码：<input type="text" name="" class="Password"></p>
			<button class="sigin">登录</button>
			<button class="register">注册</button>
		</div>
	</div>
</body>
<script type="text/javascript">
	var isLock = true;
	var arr = [];		
	$(function(){
		$(".sigin").click(function(){
			$.ajax({
				url:"http://127.0.0.1:82/sigin",
				data:{
					Accountnumber:$(".Accountnumber").val(),
					Password:$(".Password").val()
				},
				success:function(data){
					// var data = JSON.parse(data)
					console.log(data)
					if (data == 0) {
						alert("登录失败！")
					}
					else{
						alert("登录成功！")
						$(".popup").remove();
					}

				},
				error:function(error){
					alert("登录失败！")
				}
			})
		})
		$(".register").click(function(){
			$.ajax({
				url:"http://127.0.0.1:82/register",
				data:{
					Accountnumber:$(".Accountnumber").val(),
					Password:$(".Password").val()
				},
				success:function(data){
					alert("注册成功！")
					$(".popup").remove();
									},
				error:function(error){
					alert("注册失败！")
				}
			})
		})
		function add(){
			$(".show").remove();
			var count =0;
			arr.forEach(function(item,index){
				var newLi = $(".hide").clone(true).removeClass("hide").addClass("show");
				newLi.find("#dotext").text(item.text);
				newLi.attr("index",index); 
				if(item.status){
					count++;
					newLi.prependTo($("#donelist"));
					newLi.find("#hold").attr("checked",true)
				}
				else{
					$("#todolist").prepend(newLi);
					
				}
				newLi.find("input").change(function(){
					var index = $(this).closest("li").attr("index")
					arr[Number(index)].status = !arr[Number(index)].status;
					console.log(arr[Number(index)].status)				
					add()
				})
				newLi.find("i").click(function(){
					var index = $(this).closest("li").attr("index");
					arr.splice(index,1);					
					add()
				})
				//修改代办项
				newLi.find("#dotext").click(function(){
					if(isLock){
						var dotext = $(this).html();
						var _this = this; 
						$(this).html(" ")
						$(this).append($("<input type='text'>"));
						$(this).find("input").focus();
						$(this).find("input").val(dotext);
						isLock =false;
						$(this).find("input").blur(function(){
							isLock = true;
							$(_this).find("input").remove()
							$(_this).html($(this).val())
							item.text = $(this).val();
							window.localStorage.setItem("todo",JSON.stringify(arr));
						})
					}
				})
				$("#todocount").html(arr.length-count);
				$("#donecount").text(count);
			})
			window.localStorage.setItem("todo",JSON.stringify(arr));
		}
		//读取本地存储
		var Data1 = window.localStorage.getItem("todo");
		var Data = JSON.parse(Data1)
		if(Data){
			arr = Data;
			add()
		}
		//添加代办项
		$("#title").keyup(function(e){
			if(e.keyCode == 13 && $(this).val() !== " "&& $(this).val() !== ""){
				obj ={};
				obj.text = $(this).val();
				obj.status = false;
				arr.push(obj);
				$(this).val("");
				add()
				
			}
		})
		add()
	})
</script>
</html>